<template>
	<el-tabs v-model="activeName">

		<el-tab-pane label="样式" name="css" v-if="comp_content.css">
			<el-collapse accordion>
				<!-- <el-collapse-item title="尺寸与位置" class="h-from" v-if="content.css.base">
          <ui-base :value="content.css.base" @change="updateStyle" />
        </el-collapse-item> -->
				<el-collapse-item title="内容" class="h-from" v-if="text">
					<ui-content :value="comp_content.props" @change="updateTextContent" :key="index" />
				</el-collapse-item>
				<el-collapse-item title="边框" class="h-from" v-if="comp_content.css.bd">
					<ui-border :value="comp_content.css.bd" @change="updateStyle" />
				</el-collapse-item>
				<el-collapse-item title="字体" class="h-from" v-if="comp_content.css.ft">
					<ui-font :value="comp_content.css.ft" @change="updateStyle" />
				</el-collapse-item>
				<el-collapse-item title="行高" class="h-from" v-if="comp_content.css.lh">
					<ui-lineheight :value="comp_content.css.lh" @change="updateStyle" />
				</el-collapse-item>
				<el-collapse-item title="背景色" class="h-from" v-if="comp_content.css.bg">
					<ui-background :value="comp_content.css.bg" @change="updateStyle" />
				</el-collapse-item>
				<el-collapse-item title="透明度" class="h-from" v-if="comp_content.css.opa">
					<ui-opacity :value="comp_content.css.opa" @change="updateStyle" />
				</el-collapse-item>
				<el-collapse-item title="阴影" class="h-from" v-if="comp_content.css.bsd">
					<ui-boxshadow :value="comp_content.css.bsd" @change="updateStyle" />
				</el-collapse-item>
				<el-collapse-item title="图片裁剪" class="h-from" v-if="img_cropper">
					<ui-cropperimg :value="comp_content.props.src" :comid="comp_content.id" @change="updateStyle" :key="index" />
				</el-collapse-item>
			</el-collapse>
		</el-tab-pane>
		<el-tab-pane label="动画" name="anim" v-if="comp_content.anim">
			<ui-animate :value="comp_content.anim" @change="updateAnimate" />
		</el-tab-pane>
	</el-tabs>
</template>
<script>
	import UiComponents from './ui/index.js'

	export default {
		name: 'formRenderer',
		props: {
			content: {
				type: Object,
				required: true
			}
		},
		watch: {
			content() {
				++this.index
			}
		},
		computed: {
			comp_content() {
				// console.log(11)
				return this.content
			},
			text() {
				if (this.content.name === "Font" || this.content.name === "Text" || this.content.name === "Input" || this.content.name ===
					"Button"||this.content.name === "Interaction") {
					return true
				}
				return false
			},
			img_cropper() {
				if (this.comp_content.props.src) {
					if (typeof this.comp_content.props.src === 'string') {
						return true
					}
				}
				return false
			}
		},
		watch:{
			comp_content:{
				handler(new_val,old_val){
					// console.log(111)
				},
				deep: true,
			}
		},
		data() {
			return {
				activeCollapse: '1',
				activeName: 'css',
				index: 0
			}
		},
		methods: {
			updateStyleBg(value) {
				this.updateStyle({
					key: 'bgc',
					value: value
				})
			},
			updateStyle({
				key,
				value
			}) {
				// console.log(key)
				this.update({
					type: 'css',
					value: {
						[key]: value
					}
				})
			},
			updateAnimate({
				key,
				value
			}) {
				this.update({
					type: 'anim',
					value: value
				})
			},
			update({
				type,
				value
			}) {
				this.$store.commit('EDIT_COMP', {
					type: type,
					compid: this.content.id,
					value: value
				})
			},
			updateTextContent({
				key,
				value
			}) {
				this.update({
					type: 'props',
					value: {
						[key]: value
					}
				})
			}
		},
		components: UiComponents
	}
</script>
<style lang="scss" scoped>

</style>
